<template>
  <div class="maintainDetail zy-content">
    <div class="title">
      <span>查看检测计划</span>
      <div class="back" @click="back">返回上一级</div>
    </div>
    <div class="titleItem">
      <span>检测对象</span>
      <div class="checkObject">
        <div class="checkObjectItem">
          <div class="checkObjectName">计划名称</div>
          <div class="checkObjectValue">
            <Tooltip max-width="200">
              <div class="over-wrapper">{{ effPlanDetail.planName }}</div>
              <div slot="content">
                <p>{{ effPlanDetail.planName }}</p>
              </div>
            </Tooltip>
<!--            {{ effPlanDetail.planName }}-->
          </div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName" >{{$t('maintenance.EquipmentType')}}</div>
          <div class="checkObjectValue">{{ effPlanDetail.categoryName }}</div>
        </div>
      </div>
    </div>
      <div class="searchBox">
          <!--        <Form label-position="right" :label-width="100" class="search-form">-->
          <!--          <div class="label">-->
          <!--            <FormItem label="所属工厂" class="item">-->
          <!--              <Select v-model="formInline.category" filterable clearable :placeholder="`${$t('common.selectInfo')}`" >-->
          <!--                <Option v-for="(item,index) of category" :value="item.key" :key="index">{{ item.name }}</Option>-->
          <!--              </Select>-->
          <!--            </FormItem>-->
          <!--            <FormItem label="生产线描述" class="item">-->
          <!--              <Select v-model="formInline.position" filterable clearable :placeholder="`${$t('common.selectInfo')}`" >-->
          <!--                <Option v-for="(item,index) of position" :value="item.key" :key="index">{{ item.name }}</Option>-->
          <!--              </Select>-->
          <!--            </FormItem>-->
          <!--            <FormItem label="制造商" class="item">-->
          <!--              <Select v-model="formInline.classification" filterable clearable :placeholder="`${$t('common.inputInfo')}`" >-->
          <!--                <Option v-for="(item,index) of classification" :value="item.key" :key="index">{{ item.name }}</Option>-->
          <!--              </Select>-->
          <!--            </FormItem>-->
          <!--             <FormItem :label="`${$t('ledger.EquipmentType')}:`" class="item">-->
          <!--              <Input type="text" v-model="text" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>-->
          <!--            </FormItem>-->
          <!--            <FormItem label="" class="item">-->
          <!--              <Button type="primary">{{$t('common.Query')}}</Button>-->
          <!--            </FormItem>-->
          <!--          </div>-->
          <!--        </Form>-->
          <div class="contentTable">
              <Table ref="selection" :columns="columns" :data="effPlanDetail.dcmAcctestDetailList"></Table>
              <!--          <div class="pageWrap">-->
              <!--            <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />-->
              <!--          </div>-->
          </div>
      </div>
    <div class="titleItem">
      <span>检测时间</span>
      <div class="checkObject">
        <div class="checkObjectItem">
          <div class="checkObjectName">检测方式</div>
          <div class="checkObjectValue">{{ effPlanDetail.acctestName }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">{{$t('maintenance.TriggerInterval')}}</div>
          <div class="checkObjectValue">{{ effPlanDetail.triggerCycleText }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">{{$t('maintenance.createTime')}}</div>
          <div class="checkObjectValue">{{ effPlanDetail.firstTime }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">{{$t('maintenance.planEndTime')}}</div>
          <div class="checkObjectValue">{{ effPlanDetail.planEndTime }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">{{$t('maintenance.Taskduration')}}</div>
          <div class="checkObjectValue">{{ `${effPlanDetail.pdays}天${effPlanDetail.phours}小时` }}</div>
        </div>
      </div>
    </div>
      <div class="titleItem">
      <span>检测内容</span>
    </div>
      <div class="contentTable">
          <Table ref="selection" :columns="contentColumns" :data="effPlanDetail.dcmAcctestProjectList">
              <template slot-scope="{ row }" slot="action">
                  <span class="operationBtn" @click="seeDetail(row)"><Icon type="md-eye" size='18' />{{$t('common.CheckDetial')}}</span>
              </template>
          </Table>
      </div>
    <Modal :mask-closable="false"
      v-model="visible"
      title="检测内容详情"
      class="checkContentModal"
      width='1200'
      footer-hide
      >
        <contentDetail :planMaterialList="materialList" :planToolList="toolList"></contentDetail>
    </Modal>
  </div>
</template>

<script>
import contentDetail from './contentDetail.vue'
export default {
  name: "maintainDetail",
  components: {
    contentDetail
  },
  props: ['effPlanDetail'],
  data() {
    return {
      formInline: {},
      text: '',
      visible: false,
      materialList: [],
      toolList: [],
      category: [
        {name: '全部', key: ""},
        {name: 'CNC', key: 'CNC'},
        {name: 'PLC', key: 'PLC'},
        {name: 'IPC', key: 'IPC'},
      ],
      position: [{name: "全部", key: ""}],
      classification: [{name: "全部", key: ""}],
      checkObject: [
        {name: '计划名称', value: 'cnc设备定期点检'},
        {name: '设备类别', value: 'cnc'},
        {name: '检测位置', value: '主轴'},
        {name: '检测分类', value: '润滑'},
      ],
      checkTime: [
        {name: '检测方式', value: '定期点检'},
        {name: '触发间隔', value: '次/日'},
        {name: '首次生成时间', value: '2021年9月15日 16:38:50'},
        {name: '计划截止时间', value: '2021年9月15日 16:38:50'},
        {name: '任务存活时间', value: '1天3小时'},
      ],
      checkContent: [
        {name: '检测项目', value: '主轴清洗'},
        {name: '检测方法', value: '主轴清洗'},
      ],
      checkStandard: [
        {name: '下限', value: '0.5'},
        {name: '上限', value: '1.0'},
        {name: '单位', value: '摄氏度'},
      ],
      checkTool: [
        {name: '物料代码', value: ''},
        {name: '使用工具', value: ''},
        {name: '规格型号', value: ''},
        {name: '品牌', value: ''},
        {name: '数量', value: ''},
        {name: '保养方式', value: ''},
      ],
      checkMaterial: [
        {name: '物料代码', value: ''},
        {name: '物料名称', value: ''},
        {name: '数量', value: ''},
        {name: '单价', value: ''},
        {name: '总价', value: ''},
      ],
      columns: [
        { title: `${ this.$t('common.Belongsfactory') }`, key: "belongCompanyName" },
        { title: `${ this.$t('maintenance.EquipmentNo') }`, key: "deviceMId" },
        {  title: `${ this.$t('common.machineno') }`, key: "deviceNo" },
        { title: `${ this.$t('maintenance.EquipmentName') }`, key: "deviceName" },
        { title: `${ this.$t('ledger.EquipmentType') }`, key: "specification" },
        { title: `${this.$t('fault.FunctionalLocation')}`, key: "orgName" },
        { title: `${ this.$t('common.Productioncode') }`, key: "productionCode" },
        { title: `${ this.$t('common.ProductionDescription') }`, key: "productionLine" },
      ],
      contentColumns: [
        {title: `${ this.$t('common.testitems') }`, key: 'itemProject'},
        {title: `${ this.$t('common.testmethod') }`, key: 'itemMethod'},
        {title: `${ this.$t('maintenance.Unit') }`, key: 'unitName'},
        {title: `${ this.$t('maintenance.UpperLimit') }`, key: 'maxValue'},
        {title: `${ this.$t('maintenance.LowerLimit') }`, key: 'minValue'},
        {title: `${ this.$t('common.operation') }`, slot: 'action', width: 150, align: 'center'},
      ],
      contentData: [
        {content: '刀库刀套清理', checkFunction: '动作顺畅、定位准确', company: '--', up: '--', down: '--'},
        {content: '打黄油', checkFunction: '无松动', company: '--', up: '--', down: '--'},
        {content: '主轴风扇清理', checkFunction: '动作顺畅、定位准确', company: '--', up: '--', down: '--'},
      ],
      total: 64,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
    }
  },
  methods: {
    back() {
      this.$emit('changeDetailVisible', false, this.effPlanDetail.id)
    },
    changePageNum() {},
    changePageSize() {},
    seeDetail(row) {
      this.visible = true;
      this.getWlDetail(row.itemId)
    },
    getWlDetail(itemId) {
      this.axios({
        method: 'get',
        url: '/dms/dcmAcctestTask/queryByItemId',
        params: {
          itemId
        }
      }).then(res => {
        
        if(res.code === 200){
          this.materialList = res.data.materialList
          this.toolList = res.data.toolList
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
  }
}
</script>
<style lang="scss">
.maintainDetail {
  background: #fff;
  .title {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    align-items: center;
    .back {
      color: #187BDB;
      font-size: 16px;
      padding-left: 20px;
      cursor: pointer;
    }
  }
  .titleItem {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    .checkObject {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
      /*border-bottom: 2px solid #D7D7D7;*/
      .checkObjectItem {
        display: flex;
        flex: 0 33%;
        .checkObjectName {
          height: 40px;
          line-height: 40px;
          width: 30%;
          border: 1px solid #EEEEEE;
          background: #F5F6F7;
          text-align: right;
          padding-right: 10px;
            color: #999999;
            font-size: 13px;
        }
        .checkObjectValue {
          height: 40px;
          line-height: 40px;
          width: 70%;
          border: 1px solid #EEEEEE;
          padding-left: 10px;
            color: #333333;
            font-size: 13px;
        }
      }
    }
    .searchBox {
      .label {
        display: flex;
      }
    }

  }
    .contentTable {
        margin: 20px;
    }
  .titleItem::before{
    content: '';
    position: absolute;
    width: 3px;
    height: 20px;
    top: 12px;
    left: 0px;
    background: #187BDB;
  }
}
.over-wrapper {
  width: 200px;
  /*height: 23px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
